<template>
<div>
	<div class="bigtitle">
		<div class="bigtitle-title">我的收藏</div>
	</div>
	<table class="minitable minitable-easy" mgt2 long>
		<tr gray3>
			<th text-left>商品名称</th>
			<th>收藏时间</th>
			<th>操作</th>
		</tr>
		<tr v-for="(item, index) in items" :key="index">
			<td pd1>
				<order-detail-profile :detail="item"></order-detail-profile>
            </td>
			<td text-center>{{formatTimeStr(item.creationTime)}}</td>
			<td text-center>
                <span linkable mgr2 @click="handleGoToBuy(item.commodityId)">购买</span>
                <span linkable @click="handleDelete(item.id)">删除</span>
            </td>
		</tr>
	</table>
    <AutoPage :value="page" text-right mgt2></AutoPage>
</div>
</template>

<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import AutoPage from '@common/components/AutoPage';
import OrderDetailProfile from '../../components/common/order-detail-profile.vue'

@Component({
    components: { AutoPage, OrderDetailProfile }
})
export default class Collection extends AbpBase{
    get page() {
        return this.$store.state.collection.page;
    }
    get items() {
        return this.$store.state.collection.page.items;
	}
	handleDelete(id) {
		this.confirm('确认删除该收藏吗？', async () => {
			var response = await this.post('Collection/Remove', { id: id });
			if(response.success) {
				this.page.getData();
			}
		});
	}
	handleGoToBuy(commodityId) {
		this.$router.push({
			name:'commodity-detail',
			params: {
				id: commodityId
			}
		});
	}
}
</script>